<script setup lang="ts">
import { DialogProps } from 'element-plus'
import { computed, useAttrs } from 'vue';
import { FullScreen } from '@element-plus/icons-vue'

const props = defineProps<{
  url?: string,
  fullscreen?: boolean,
  callback?: (data?: any) => void
}>()

const emit = defineEmits(['toggleFullscreen'])

const cls = 'ui-api-editor'

const EVT_CREATE_SUCCESS = 'evt_create_success'

const attrs = useAttrs()

const dialogProps = computed(() => {
  return {
    title: 'API编辑器',
    appendToBody: true,
    alignCenter: true,
    width: 1000,
    closeOnClickModal: false,
    fullscreen: props.fullscreen,
    ...attrs
  } as DialogProps
})

const toggleFullscreen = () => emit('toggleFullscreen')
</script>

<template>
  <ElDialog :class="cls" v-bind="dialogProps">
    <ElLink
      :class="`${cls}_btn_fullscreen`"
      :underline="false"
      :icon="FullScreen"
      :title="fullscreen ? '取消全屏' : '全屏'"
      @click="toggleFullscreen" />
    <iframe :src="url"></iframe>
  </ElDialog>
</template>

<style lang="scss">
.ui-api-editor {
  &.is-fullscreen {
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      flex: 1;
      height: 0;
    }
  }
  iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
  }
  &_btn_fullscreen {
    position: absolute;
    top: 15px;
    right: 40px;
  }
}
</style>
